<style scoped>
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}
.menu-item i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.collapsed-menu span {
  width: 0px;
  transition: width 0.2s ease;
}
.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
  vertical-align: middle;
  font-size: 22px;
}
.layout {
  width: 200px;
  background: white;
}
</style>
<template>
  <div class="layout">
    <!-- 侧边导航 -->
    <Layout>
      <Sider hide-trigger :style="{ background: '#fff' }">
        <Menu active-name="0" theme="light" width="auto" :open-names="['0']">
          <Submenu name="1">
            <template slot="title">
              <Icon type="ios-navigate"></Icon>
              页面
            </template>
            <MenuItem name="1-1" to="/home/set">导航设置</MenuItem>
            <MenuItem name="1-2" to="/home/carousel">轮播设置</MenuItem>
            <MenuItem name="1-3" to="/home/page">页面管理</MenuItem>
          </Submenu>
          <Submenu name="2">
            <template slot="title">
              <Icon type="ios-folder-open"></Icon>
              商品
            </template>
            <MenuItem name="2-1"  to="/home/Category">商品分类</MenuItem>
            <MenuItem name="2-2"  to="/home/catalogue">商品列表</MenuItem>
          </Submenu>
          <Submenu name="3">
            <template slot="title">
              <Icon type="ios-document"> </Icon>
              文章
            </template>
            <MenuItem name="3-1" to="/home/Categories">文章分类</MenuItem>
            <MenuItem name="3-2" to="/home/ArticleList">文章列表</MenuItem>
          </Submenu>
          <Submenu name="4">
            <template slot="title">
              <Icon type="md-filing"></Icon>
              设置
            </template>
            <MenuItem name="4-1" to="/home/Admin"> 管理员设置</MenuItem>
            <MenuItem name="4-2" to="/home/operating">操作记录</MenuItem>
          </Submenu>
        </Menu>
        <div slot="trigger"></div>
      </Sider>
    </Layout>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isCollapsed: false,
    };
  },
  components: {},
  computed: {
    menuitemClasses: function () {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    },
  },
};
</script>
